<template>
<div class="app">
  <plus-component></plus-component>
    <top-component class="TOP" :message='topTitle'></top-component>
    <slide-show-component></slide-show-component>
    <search-component style="margin-top:200px"></search-component>
    <!-- 分隔介绍栏 -->
    <div class="DIVISION">
      <img class="division-university" :src="university">
      <span>{{title}}</span>
      <img class="division-change" :src="col">
    </div>
    <content-component></content-component>
</div>
</template>

<script>
import TopComponent from '../subComponent/Top.vue'
import SlideShowComponent from '../subComponent/SlideShow.vue'
import SearchComponent from '../subComponent/Search.vue'
import ContentComponent from '../subComponent/Content.vue'
import plusComponent from '../subComponent/plus.vue'
export default {
  data () {
    return {
      university: require('@/assets/images/ICons/University.png'),
      row: require('@/assets/images/ICons/row.png'),
      col: require('@/assets/images/ICons/col.png'),
      title: '校园实时',
      topTitle: '首页'
    }
  },
  methods: {
  },
  components: {
    TopComponent,
    SlideShowComponent,
    SearchComponent,
    ContentComponent,
    plusComponent
  }
}
</script>

<style lang='scss'>
.TOP {
  position: fixed;
}
.app {
  background-color: white;
}
.DIVISION {
  width: 100%;
  height: 30px;
  margin: 30px 0px 10px 0;
  border-bottom: 2px solid Lavender;
  img {
    height: 20px;
    width: 20px;
  }
  .division-university {
    margin-left: 20px;
    float: left;
  }
  .division-change {
    float: right;
    margin-right: 20px
  }
  span {
    float: left;
    margin: 0 0 5px 15px;
    font-family: 微软雅黑;
    font-size: 18px;
    font-weight: bold;
    color: #E9BD7A
  }
}

</style>
